<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>订单详情</title>
<jsp:include page="header.jsp"></jsp:include>
	<style>
		.my-div {
			float:left;
			position:relative;
			width: 50px;
			height: 50px;
		}
		.weui-media-box__hd img {
			display: block;
			width: 100%;
			height: 100%;
		}
		.my-div img {
			display: block;
			width: 100%;
			height: 100%;
		}
		.my-div input {
			position: absolute;
			top:0;
			left:0;
			width:100%;
			height:100%;
			opacity: 0;
	    	filter: alpha(opacity=0);
	    	cursor: pointer
	}
	.my-address {
			display:block;
			margin-top: 10px;
			padding: 0px;
			width: 100%;
			color:red;
			height: 42px;
			line-height: 42px;
			font-size: 21px;
			text-align: center;
			border-color: #000000;
		}
		.my-col-50 {
			float: left;
			width: 50%;
			height: 42px;
		}
		.my-col-50 .my-tt {
			width: 100%;
			height: 100%;
			margin-left: 15px;
			padding-top: 12px; 
		}
		.my-xiyi-row {
			width: 100%;
			margin-left: 24px;
		}
	</style>
</head>
<body ontouchstart>
	<!--主体-->
<div class="weui-content">
<div class="weui-tab">
  <div class="weui-navbar">
    <a class="weui-navbar__item weui-bar__item--on" href="#tab1" id="my_ps">
      	配送
    </a>
    <a class="weui-navbar__item" href="#tab2" id="my_ziti">
      	自提
    </a>
  </div>
 <div class="weui-tab__bd">
 <div class="wy-media-box weui-media-box_text address-select">
    <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
    <c:choose>
	<c:when test="${not empty address}">
      <div class="weui-media-box_appmsg">
      <div class="weui-media-box__hd proinfo-txt-l" style="width:20px;"><span class="promotion-label-tit"><img src="/images/icon_nav_city.png" /></span></div>
      <div class="weui-media-box__bd">
        <a href="/phone/addressEdit?orderId=${order.id}&addressId=${address.id}" class="weui-cell_access">
          <h4 class="address-name"><span>${address.userName}</span><span>${address.telephone}</span></h4>
          <div class="address-txt">${address.addressDetail}</div>
        </a>
      </div>
      <div class="weui-media-box__hd proinfo-txt-l" style="width:16px;"><div class="weui-cell_access"><span class="weui-cell__ft"></span></div></div>
    </div>
    </c:when>
	<c:otherwise>
	<div class="weui-media-box_appmsg">
	<a href="/phone/addressEdit?orderId=${order.id}" class="my-address">+新增地址</a>	
	</div>
	</c:otherwise>
	</c:choose>
    </div>
    <div id="tab2" class="weui-tab__bd-item">
    <c:choose>
 	<c:when test="${not empty yaodian}">
     <div class="weui-media-box_appmsg">
      <div class="weui-media-box__hd proinfo-txt-l" style="width:20px;"><span class="promotion-label-tit"><img src="/images/center-icon-dz.png" /></span></div>
      <div class="weui-media-box__bd">
        <a href="/phone/yaodian?orderId=${order.id}" class="weui-cell_access">
          <h4 class="address-name"><span>${yaodian.houseName}</span></h4>
          <div class="address-txt">${yaodian.houseAddress}</div>
        </a>
      </div>
      <div class="weui-media-box__hd proinfo-txt-l" style="width:16px;"><div class="weui-cell_access"><span class="weui-cell__ft"></span></div></div>
    </div>
    </c:when>
	<c:otherwise>
		<div class="weui-media-box_appmsg">
		<a href="/phone/yaodian?orderId=${order.id}" class="my-address">+选择药店</a>	
		</div>
		</c:otherwise>
	</c:choose>
    </div>
  </div>
</div>
</div>		<input type="hidden" id="addree_id" value="${address.id}"/>
				<input type="hidden" id="orderYuliu" value="${yaodian.id}" /> 
				<input type="hidden" name="chufangPic" />
<!-- 内容开始 -->
	<div class="wy-media-box weui-media-box_text">
	<c:if test="${not empty list}">
 	<c:forEach var="app" items="${list}" varStatus="st">
				<div class="weui-media-box__bd">
					<div class="weui-media-box_appmsg ord-pro-list">
						<div class="weui-media-box__hd">
							<a href="javascript:;"><img class="weui-media-box__thumb"
								src="${app.goodsPic}" alt=""></a>
						</div>
						<div class="weui-media-box__bd">
							<h1 class="weui-media-box__desc">
								<a href="${pageContext.request.contextPath }/phone/detail?id=${app.goodsId}" class="ord-pro-link">${app.goodsName}</a>
							</h1>
							<!-- <p class="weui-media-box__desc">
								规格：<span>红色</span>，<span>23</span>
							</p> -->
							<div class="clear mg-t-10">
								<div class="wy-pro-pri fl">
									¥<em class="num font-15">${app.orderPrice}</em>
								</div>
								<div class="pro-amount fr"><span class="font-13">数量×<em class="name">${app.orderSum}</em></span></div> 
							</div>
						</div>
					</div>
				</div>
				</c:forEach>
				</c:if>
			</div>
			<div class="weui-panel">
				<div class="weui-panel__bd">
					<div class="weui-media-box weui-media-box_small-appmsg">
						<div class="weui-cells">
							<div class="weui-cell weui-cell_access" id="my_tel">
								<div class="weui-cell__bd weui-cell_primary">
									<p class="font-14">
										<span class="mg-r-2">手机号码</span><span class="fr"><input class="weui-input" type="tel" placeholder="请输入手机号" name="orderRemark"></span>
									</p>
								</div>
							</div>
							<div class="weui-cell weui-cell_access">
								<div class="weui-cell__bd weui-cell_primary">
									<p class="font-14">
										<span class="mg-r-2">买家留言</span><span class="fr"><input class="weui-input" type="text"  placeholder="请输入留言!" name="liuyan"></span>
									</p>
								</div>
							</div>
							<div class="weui-cell weui-cell_access" href="javascript:;">
								<div class="weui-cell__bd weui-cell_primary">
									<p class="font-14">
										<span class="mg-r-10">上传处方</span>
									</p>
									<div class="my-div"><img src="/images/cloud-up-icon.png" alt="" />
										<input type="file" name="file" id="img_input"/>
									</div>
									<div class="my-div" id="pic_content"></div>
								</div>
							</div>
							<div class="weui-cell weui-cell_access" href="javascript:;">
							<label for="weuiAgree" class="weui-agree">
	    						<input id="weuiAgree" type="checkbox" class="weui-agree__checkbox" checked="checked">
	    						<span class="weui-agree__text">阅读并同意<a href="javascript:void(0);">《购买协议》</a></span>
  							</label>
  							</div>
  							<div class="my-xiyi-row"><a href="/phone/xiyi" class="weui-cell_link font-12">查看购买协议</a></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-tabbar wy-foot-menu">
				      <div class="my-col-50">
				      <div class="my-tt">总金额：<span class="wy-pro-pri mg-tb-5">¥<em
						class="num font-20" id="my_total">${sum}</em></span>
						</div>
						</div>
				      <div class="my-col-50"><a href="javascritpt:;" class="weui-btn weui-btn_primary" id="to_pay">确认支付</a></div>
    				
			</div>
		<div id="full" class='weui-popup__container'>
		<div class="weui-popup__overlay"></div>
		<div class="weui-popup__modal">
    		<img src="/upload/pro1.jpg"></img>
				<a href="javascript:;" class="weui-btn weui-btn_primary close-popup">关闭</a>
  			</div>
				<input type="hidden" name="ids" value="${ids}" id="my_tt"/> 
			</div>
<jsp:include page="foot.jsp"></jsp:include>
<script type="text/javascript">
		$(function(){
			var yao =$('#orderYuliu').val();
			if(''==yao){
				$('#my_tel').hide();
			}else{
				$('#my_ziti').attr("class","weui-navbar__item weui-bar__item--on");
				$('#my_ps').attr("class","weui-navbar__item");
				$("#tab1").hide();
				$("#tab2").show();
			}
		});
		$('#my_ziti').click(function(){
			$("#tab1").hide();
			$("#tab2").show();
			$('#my_tel').show();
		});
		$('#my_ps').click(function(){
			$("#tab1").show();
			$("#tab2").hide();
			$('#my_tel').hide();
		});
		$('#img_input').change(function(){
			var file = this.files[0];
			if(file==null){
				$.toast("请选择上传文件!",'text',1000); 
		    	return false;
		    }
			var rFilter =/^(image\/bmp|image\/gif|image\/jpeg|image\/png|image\/tiff)$/;
			if(!rFilter.test(file.type)){
				$.toast("文件上传的格式不正确!",'text',1000); 
		    	return false;
			}else{
				var formdata = new FormData();
				formdata.append('file',file);  
					$.showLoading();
					upload(formdata);
				
			}
		});
		
		$('#to_pay').click(function(){
			var all =$('#my_total').html();
			var telephone=$("input[name='orderRemark']").val();
			var comment =$("input[name='liuyan']").val();
			var addree_id =$('#addree_id').val();
			var orderYuliu =$('#orderYuliu').val();
			var ids=$('#my_tt').val();
			var chufangPic =$('input[name="chufangPic"]').val();
			if(chufangPic==null||''==chufangPic){
				$.toast("请选择上传文件!",'text',1000); 
				return false;
			}
			if(addree_id==null||addree_id==""||addree_id=="undefined"){
				if(orderYuliu=null||orderYuliu==''){
					$.alert("请选择地址或者自提医院!");
					return false;
				}
			}  
			if(''!=telephone&&!(/^1[3|4|5|8|7|6][0-9]\d{8}$/.test(telephone))){
				$.alert("不是完整的11位手机号!");
				return false;
			}
			if(!($('#weuiAgree').is(":checked"))){
				$.alert("请同意购买协议!");
				return false;
			}
			var fd = new FormData();
			fd.append('ids',ids); 
			fd.append('orderRemark',telephone);  
			fd.append('orderTotal',all);
			fd.append('orderDetail',comment);
			fd.append('orderAddress',addree_id);
			fd.append('orderYuliu',orderYuliu);
			fd.append('chufangPic',chufangPic);
			$.ajax({
                type: 'post',
                url: '/phone/creatCartOrder',
                data: fd,
                contentType: false,
                processData: false,
                beforeSend:function(){
                	$.showLoading();
                },
                success: function(data) {
                	if(data!=null&&data!=''){
                		var url ="/phone/orderCartPay?id="+data;
	                	window.location.href=url;
                	}else{
                		$.alert("确认订单失败!");
                		$.hideLoading();
                	}
                },
                error : function(data) { 
                	 $.alert("确认订单失败!");
			    	 $.hideLoading();
			     }  
            })
		});
		function upload(formdata){
			$.ajax({  
			     url : "/phone/upload",  
			     type : "POST",  
			     data : formdata, 
		         cache:false,
		         contentType:false,
		         processData:false,
			     success : function(data) { 
			    	 $.hideLoading();
			          if(""!=data){
			        	  $('input[name="chufangPic"]').val(data);
			        	  $('#pic_content').html();
			        	  var str ='<img src="'+data+'">';
			        	  $('#pic_content').html(str);
			        	  $.toast("上传文件成功!");
			          }
			     },  
			     error : function(data) { 
			    	 $.hideLoading();
			    	 $.toast("上传图片失败!","text");
			     }  
			});  
		}
		/* $('#my_ziti').click(function(){
			$('#my_tel').show();
		}); */
</script>
</body>
</html>
